<template>
    <div class="right">
        <div class="right-top">
          <el-row :gutter="20">
            <el-col :span="20" :offset="0">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
              >
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="my_create">我创建的</el-menu-item>
                <el-menu-item index="my_join">我加入的</el-menu-item>
                <el-menu-item index="my_course">我课程的</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="4" :offset="0">        
              <el-button  @click=""> 创建</el-button>
            </el-col>
          </el-row>
        </div>
        <!-- 右下 -->
        <div class="right-lower">
            <Videos :ta="ta" v-for="ta in  trainingRoomData" :key="ta.id" v-if="trainingRoomData.length"></Videos>
            <el-empty v-else :image-size="200" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Videos from '../Videos/index.vue'
import trainingRoomApi,{type MyExerciseAll} from '../../../../api/trainingRoom'


const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  const getMyCreateList = async (key:string)=>{
      try {
        let result = await trainingRoomApi.getMyCreate(key)
        trainingRoomData.value=result.content
        console.log( '1',result);
        
      } catch (error) {
        console.error('获取我的练习室全部数据失败');
        
      }
  }
  getMyCreateList(key)
}

const trainingRoomData = ref <MyExerciseAll[]>([{
    cover:'',
    id:'',
    isDelete:0,
    planName:'',
    status:'',
    weekTrainedDuration:0,
    weeklyPlanDuration:0,
}])
const getAllData= async ()=>{
  try {
    let result = await trainingRoomApi.getMyExerciseAll()
    trainingRoomData.value=result.content
    // console.log(result)
    
  } catch (error) {
    console.error('获取我的练习室全部数据失败');
    
  }
}
onMounted(()=>{
  getAllData();
})
</script>

<style lang="scss" scoped>
.flex-grow {
  flex-grow: 1;
}
.right{
  width: 83%;
  height: 100%;
  float: left;
  .right-top{
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    span{
      display: inline-block;
      padding: 10px;
      border-radius: 10px;
      font-size: 14px;
      margin-right: 20px;
    }
    .active{
      background-color: #F93684;
      color: #fff;
    }
    .last{
      float: right;
      padding: 5px 26px;
      border-radius: 20px;

      font-size: 14px;
      color: #fff;
      background-color: #F93684;
    }
  }
  .right-lower{
    height: 730px;
    margin-top: 10px;
    background-color: #fff;
    border-radius: 5px;
  }
}
.el-menu-item{
  line-height: 40px;
  margin: 10px;
}
.el-menu--horizontal>.el-menu-item.is-active{
  border-bottom: none;
  background-color: #F93684 !important;

}
.el-menu--horizontal{
  border-bottom: none;
  --el-menu-active-color:#fff !important;
}
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
  background-color: #fff;
  color: black;
}
.el-menu--horizontal>.el-menu-item{
  border-bottom: none;
  border-radius: 5px;
}
.el-button{
  border-radius: 20px;
  padding: 18px 30px;
  margin: 10px 20px;
  background-color: #F93684;
}
:deep( .el-button>span){
  color: #fff ;
}
</style>
